<template>
  <div class="list-item-row">
    <div
      v-for="(item, index) in dataList"
      class="list-item"
      :key="item"
      @click="checkClick(index, item)"
      :class="{ active: index === currentIndex }"
    >
      <span class="iconfont" :class="{ 'icon-duigou1': index === currentIndex }"></span>
      <span>{{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'listItemRow',
  props: {
    dataList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      currentIndex: 0
    }
  },
  methods: {
    checkClick(index, item) {
      this.currentIndex = index
      this.$emit('changeFont', item, index)
    }
  }
}
</script>

<style lang="scss" scoped>
.list-item-row {
  background: #fff;
  .list-item {
    height: 0.44rem;
    border-bottom: 0.5px solid #eee;
    padding: 0.15rem;
    font-size: 0.13rem;
    display: flex;
    align-items: center;
    .iconfont {
      margin-right: 0.1rem;
      width: 0.1rem;
    }
  }
}
.active {
  color: #ff5f16;
}
</style>